<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>xml实例</title>
  <style>
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th, td {
      padding: 5px;
    }
  </style>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">获取我的音乐列表</button>
<br><br>
<table id="demo"></table>
<br><br>
<p>显示第一首歌信息:</p>
<div id="showMusic"></div>
<br>
<input type="button" onclick="previous1()" value="<<">
<input type="button" onclick="next1()" value=">>">

<br>
<p>点击某个曲目,显示专辑信息:</p>
<div id="showMUSIC1"></div>
<table id="demo1"></table>

<script>
  var y,xmlhttp,xmlDoc;
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "./music_list.xml", false);
  xmlhttp.send();
  xmlDoc = xmlhttp.responseXML;
  y = xmlDoc.getElementsByTagName("TRACK");
  table = "<tr><th>艺术家</th><th>曲目</th></tr>";
  for (i=0;i<y.length;i++){
    table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
    table += y[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table +=  y[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
    table += "</td></tr>";
  }
  document.getElementById("demo1").innerHTML = table;

  function displayMUSIC(i) {
    document.getElementById("showMUSIC1").innerHTML =
      "<ul>" +
      "<li>曲目：" +
      y[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
      "<li>艺术家：" +
      y[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
      "<li>专辑：" +
      y[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
      "<li>国家：" +
      y[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
      "<li>公司：" +
      y[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
      "<li>年份：" +
      y[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
      "</ul>";
  }

  var i = 0, len;
  displayMusic(0);

  function displayMusic(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        myFunction1(this, i);
      }
    };
    xmlhttp.open("GET", "./music_list.xml", true);
    xmlhttp.send();
  }

  function myFunction1(xml, i) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("TRACK");
    len = x.length;
    document.getElementById("showMusic").innerHTML =
      "<ul>" +
      "<li>曲目: " +
      x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" + "<li>艺术家:" +
      x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>专辑:" +
      x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" + "<li>国家:" +
      x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" + "<li>公司:" +
      x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" + "<li>年份:" +
      x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + "</ul>";
  }

  function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
      }
    };
    xmlhttp.open("GET", "./music_list.xml", true);
    xmlhttp.send();
  }

  function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table = "<tr><th>艺术家</th><th>曲目</th></tr>";
    var x = xmlDoc.getElementsByTagName("TRACK");
    for (i = 0; i < x.length; i++) {
      table += "<tr><td>" +
        x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
        "</td></tr>"
    }
    document.getElementById("demo").innerHTML = table;
  }

  function next1() {
    if (i < len - 1) {
      i++;
      displayMusic(i);
    }
  }

  function previous1() {
    if (i > 0) {
      i--;
      displayMusic(i);
    }
  }
</script>
</body>
</html>
